<template>

    <el-descriptions>
        <el-descriptions-item label="标题：">{{ dataDetail.title }}</el-descriptions-item>
        <el-descriptions-item label="活动地点：">{{ dataDetail.place }}</el-descriptions-item>
        <el-descriptions-item label="开始时间：">{{ dataDetail.openTime }}</el-descriptions-item>
        <el-descriptions-item label="限制人数：">{{ dataDetail.limitPersonNum }}</el-descriptions-item>
        <el-descriptions-item label="状态：">{{ statusMap.get(dataDetail.status) }}</el-descriptions-item>
        <el-descriptions-item label="发布时间：">{{ dataDetail.gmtCreateTime }}</el-descriptions-item>

        <el-descriptions-item label="参与条件：">{{ dataDetail.condition }}</el-descriptions-item>
    </el-descriptions>
    <hr>
    <el-descriptions>
        <el-descriptions-item label="描述：">{{ dataDetail.content }}</el-descriptions-item>
        <el-descriptions-item label="图片信息：">{{ dataDetail.pictureUrlList }}</el-descriptions-item>
    </el-descriptions>
    <hr>
    <el-descriptions>

        <el-descriptions-item label="文件：">{{ dataDetail.fileList }}</el-descriptions-item>

    </el-descriptions>

    <el-button v-if="dataDetail.status === '2'" type="primary" size="large" @click="register()">
        报名
    </el-button>
    <el-button v-if="dataDetail.status === '3'" type="primary" size="large" @click="register()">
        参与活动
    </el-button>


</template>

<script setup>
import {ref} from "vue";
import {getPostList} from "@/api/request";
import {Search} from "@element-plus/icons-vue";

const pageNum = ref(1)
const pageSize = ref(10)
const pageSizeList = ref([10, 20, 30, 40])
const total = ref(0)
const startTime = ref("")
const endTime = ref("")
const loginUserId = ref("")
const loginUserName = ref("")

const typeMap = ref(new Map([
    ['1', "求助"],
    ['2', "教程"],
    ['3', "讨论"],
    ['4', "分享"],
    ['5', "其他"]
]))


const statusMap = ref(new Map([
    ['2', "报名阶段"],
    ['3', "活动进行中"],
    ['4', "取消"],
    ['5', "圆满结束"]
]))

const reqParam = ref({
    loginUserId: "",
    loginUserName: "",
    pageNum: 1,
    pageSize: 20,
    startTime: "",
    endTime: "",
    searchContent:""
})
const dataDetail = ref({
    id: "1",
    title: "新活动",
    content: "的味道无多无多无多无多无的味道无多无多无多无多无的味",
    fileList: [
        {
            id: "1",
            title: "",
            url: "",
            size: 0.0
        }
    ],
    pictureUrlList: [],
    limitPersonNum: 100,
    place: "杭州市",
    openTime: "2023-01-02",
    condition: "不限",
    status: "2",
    backReason: "",
    creatorId: "",
    creatorName: "",
    gmtCreateTime: "20",
    modifierId: "",
    modifierName: "",
    gmtModifyTime: ""
})

function handleSizeChange() {
    // 再次请求
    getList(reqParam.value)
}
function handleCurrentChange() {
    getList(reqParam.value)
}
async function getList(req) {
    req.pageNum = pageNum.value
    req.pageSize = pageSize.value
    let param = reqParam.value
    req.searchContent = param.searchContent
    let resp = await getPostList(req, "/post/list");
    console.log(resp)
    dataList.value = resp.list
    total.value = resp.total
}

function resetCondition() {
    reqParam.value = {
        pageNum: 1,
        pageSize: 20,
        startTime: "",
        endTime: "",
        searchContent:""
    }
    pageNum.value = 1
    pageSize.value = 20
    getList(reqParam)
}

const dataList = ref([])

</script>

<style scoped>


.selectInput {
    margin: 10px;
    width: 100%;
    height: 25%;
}

#list {
    font-size: 1em;
}
.liStyle {
    padding: 0;
    align-self: center;
    align-content: center;
    background-color: gray;
    margin: 0;
    list-style: none;
    height: 50px;
    width: 100%;
    background-color: #d3d4d6;
    border-width: 3px;
    border-color: black;

}
.bottom-font {
    width: 100%;
    height: 80px;
    font-size: 10px;
    padding: 0;
}


</style>